<template>
    <div class="goodstjpage">
        <ul class="hed">
            <li @click="spmove" :class="{'colldj': spdj}">商品</li>
            <li @click="xqmove" :class="{'colldj': xqdj}">详情</li>
            <li @click="pjmove" :class="{'colldj': pjdj}">评价</li>
        </ul>
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(val, i) in lbImg" :key="i">
                <img :src="val.src" alt="图片">
                </mt-swipe-item>
        </mt-swipe>
        <div class="choose">
            <div class="Prname">
                <span class="spname">{{ name }}</span>
                <div class="shoc">
                    <span :class="['mui-icon','mui-icon-star',{'colldj':scdj}]" @click="scfu()"></span>
                    <p>收藏</p>
                </div>
                <nut-price  :price="jg" :needSymbol="true" :thousands="false"/>
            </div>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" @click="iousdj">
                    <a class="mui-navigate-right">
                        白条
                        <span>激活白条新用户得百元礼包</span>
                    </a>
                </li>
                <li class="mui-table-view-cell" @click="servicedj">
                    <a class="mui-navigate-right">
                        服务
                        <span>极速退款&nbsp;&nbsp;&nbsp;&nbsp;正品保证&nbsp;&nbsp;&nbsp;&nbsp;赠运费险</span>
                    </a>
                </li>
                <li class="mui-table-view-cell" @click="parameterdj">
                    <a class="mui-navigate-right">
                        参数
                        <span>ISBN编号&nbsp;&nbsp;书名...</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="mui-input-row">
			<label>商品购买数量：</label>
			<div class="mui-numbox">
			<button class="mui-btn mui-btn-numbox-minus" type="button" @click="min">-</button>
			<input class="mui-input-numbox" v-model="number" type="number"/>
			<button class="mui-btn mui-btn-numbox-plus" type="button" @click="add">+</button>
			</div>
		</div>
        <div class="btn-jr">
            <button type="button" class="mui-btn mui-btn-warning" @click="shopAdd">加入购物车</button>
            <button type="button" class="mui-btn mui-btn-danger" @click="goSubOrd">立即购买</button>
        </div>
        <div class="comments" ref="pj">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        <span>评价</span>
                        <small>好评&nbsp;98%</small>
                        <small>共&nbsp;999+&nbsp;条</small>
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <div class="commplhed">
                        <small class="name">老****1</small>
                        <div class="xx">
                            <span class="mui-icon mui-icon-star" v-for="cont in 5" :key="cont"></span>
                        </div>
                        <small class="time">2019-03-03</small>
                    </div>
                    <div class="commtext">
                        <span>内容丰富，写的挺好的，了解一下奇葩的历史</span>
                        <div>
                            <img src="../../../static/pl/pl1.jpg" alt="">
                            <img src="../../../static/pl/pl1.jpg" alt="">
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="commplhed">
                        <small class="name">黑****魔</small>
                        <div class="xx">
                            <span class="mui-icon mui-icon-star" v-for="cont in 5" :key="cont"></span>
                        </div>
                        <small class="time">2019-03-03</small>
                    </div>
                    <div class="commtext">
                        <span>了解以前的医学，人们从蒙昧中走出来时多么的不易</span>
                    </div>
                </li>
                <li class="mui-table-view-cell commbut">
                    <button type="button" class="mui-btn mui-btn-outlined">查看全部评价&nbsp;&nbsp;&nbsp;&nbsp;></button>
                </li>
            </ul>
        </div>
        <div class="intro" ref="xq">
            <router-link class="goodsintro" :to="'/shoy/reco/goodstjpage/'+this.id+'/'+this.name+'/'+this.jg+'/'+this.$route.params.urlimg+'/goodsjs'">商品介绍</router-link>
            <router-link class="goodspar" :to="'/shoy/reco/goodstjpage/'+this.id+'/'+this.name+'/'+this.jg+'/'+this.$route.params.urlimg+'/goodsgg'">规格参数</router-link>
            <router-link  class="goodsafter" :to="'/shoy/reco/goodstjpage/'+this.id+'/'+this.name+'/'+this.jg+'/'+this.$route.params.urlimg+'/goodsbz'">售后保障</router-link>
        </div>
        
        <router-view></router-view>
        <!-- 白条的弹窗框 -->
        <transition>
            <div id="ious" v-show="ious">
                <div class="ioushed">
                    <span>打白条购买</span>
                </div>
                <ul class="iousethos">
                    <li>不分期<p>先用后付，无服务费</p></li>
                    <li>3期&nbsp;×&nbsp;8.08元起<p>含服务费，每期0.12元起，费率0.5%起</p></li>
                    <li>6期&nbsp;×&nbsp;4.12元起<p>含服务费，每期0.12元起，费率0.5%起</p></li>
                    <li>12期&nbsp;×&nbsp;2.13元起<p>含服务费，每期0.12元起，费率0.5%起</p></li>
                </ul>
                <nut-button block @click="iousdj">知道了</nut-button>
            </div> 
        </transition>

        <!-- 服务弹窗 -->
        <transition>
            <div id="service" v-show="services">
                <div class="servicehed">基础保障</div>
                <ul class="serviceqi">
                    <li>
                    <i><img src="../../assets/pz1.png" alt=""></i>正品保证<p>该商品由中国人保承保正品保证险</p> 
                    </li>
                    <li>
                        <i><img src="../../assets/pz2.png" alt=""></i>七天无理由退款<p>买家提出退款申请所指向的商品在“七天无理由退换货”服务保障范围内（部分商品及类目除外）</p>
                    </li>
                    <li>
                        <i><img src="../../assets/pz3.png" alt=""></i>极速退款<p>为诚信会员提供的退款退货流程的专享特权，额度是根据每个用户当前的信誉评级情况而定</p>
                    </li>
                    <li>
                        <i><img src="../../assets/pz4.png" alt=""></i>极速退货<p>预约后准时上门取件，极速退款到账</p>
                    </li>
                </ul>
                <nut-button block @click="servicedj">知道了</nut-button>
            </div>  
        </transition>
        
        <!-- 参数弹窗 -->
        <transition>
            <div id="parameter" v-show="parameters">
            <div class="parameterhed">产品参数</div>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">ISBN编号<span>878273827</span></li>
                <li class="mui-table-view-cell">书名<span>气质书</span></li>
                <li class="mui-table-view-cell">作者<span>吴丽霞</span></li>
                <li class="mui-table-view-cell">定价<span>29.80元</span></li>
                <li class="mui-table-view-cell">出版社名称<span>中国儿童出版社</span></li>
            </ul>
            <nut-button block @click="parameterdj">知道了</nut-button>
        </div>
        </transition>
        

        <!-- 蒙版 -->
        <div id="mask" v-show="mask" @click="iousdj"></div>
        <div id="mask1" v-show="mask1" @click="servicedj"></div>
        <div id="mask2" v-show="mask2" @click="parameterdj"></div>
    </div>
</template>

<script>
// import goodsjs from './components/childcom/goodsjs.vue'
export default {
    name: "goodstjpage",
    data(){
        return{
            lbImg: [],
            id: this.$route.params.id, //获取路由中传进来的参数
            name: this.$route.params.name,
            jg: this.$route.params.jg.substr(1),
            Imgurl: this.$route.params.urlimg.replace(/\-/g, "/"),
            ious: false,
            mask: false,
            mask1: false,
            mask2: false,
            services: false,
            parameters: false,
            number: 1,
            scdj: false,
            spdj: false,
            xqdj: false,
            pjdj: false,
            Cardata: []
        }
    },
    methods: {
        mounted() { //京东ui插件，操作失败弹窗
            this.$toast.fail('操作失败！');
        },
        getlbImg(){ //获取JSON文件内容
            this.$http.get("http://localhost:8080/static/res/imglb.json").then((res)=>{
                this.lbImg = res.body[this.id]
            },()=>{
                this.mounted()
            })
        },
        iousdj(){   //白条方法
            this.ious = !this.ious
            this.mask = !this.mask
        },
        servicedj(){    //服务方法
            this.services = !this.services
            this.mask1 = !this.mask1
        },
        parameterdj(){  //参数方法
            this.parameters = !this.parameters
            this.mask2 = !this.mask2
        },
        min(){  //数量中的减方法
            if(this.number > 1){
                this.number = this.number - 1
            } 
        },
        add(){  //数量中的加方法
            this.number = this.number + 1
        },
        scfu(){ //收藏点击方法
            this.scdj = !this.scdj
        },
        pjmove(){   //点击评价，跳转到相应的区域
            document.documentElement.scrollTop = this.$refs.pj.offsetTop - 200
            this.hedcolor()
        },
        xqmove(){   //点击详情，跳转到相应的区域
            document.documentElement.scrollTop = this.$refs.xq.offsetTop - 200
            this.hedcolor()
        },
        spmove(){   //点击商品，跳转到相应的区域
            document.documentElement.scrollTop = 0
            this.hedcolor()
        },
        hedcolor(){
            if(document.documentElement.scrollTop >=0 && document.documentElement.scrollTop < this.$refs.pj.offsetTop - 200){
                this.spdj = true
                this.xqdj = this.pjdj = false
            }
            if(document.documentElement.scrollTop + 2 >= this.$refs.pj.offsetTop - 200 && document.documentElement.scrollTop < this.$refs.xq.offsetTop - 200){
                this.pjdj = true
                this.xqdj = this.spdj = false
            }
            if(document.documentElement.scrollTop + 2 >= this.$refs.xq.offsetTop - 200){
                this.xqdj = true
                this.pjdj = this.spdj = false
            }
        },
        shopAdd(){ //确认加入购物车弹窗
            const vuethis = this
            this.$dialog({
                title: "确定加入购物车吗？",
                onOkBtn(event){  //确定按钮点击事件
                    vuethis.shopData()
                    this.close(); //关闭对话框
                    this.$toast.success('加入购物车成功！');
                }
            });
        },
        shopData(){
            let shoCar = {Carname: this.name, Carjg: this.jg, CarImg:this.Imgurl,Carnum: this.number, carBool: true}
            this.$store.commit("addCar",shoCar)
            this.$store.commit("getcarOf")
        },
        goSubOrd(){ //编程式路由跳转到订单详情
            const vuethis = this
                this.$dialog({
                    title: "确定立即购买吗？",
                    onOkBtn(event){  //确定按钮点击事件
                        let data = {ordename: vuethis.name, ordejg: vuethis.jg, ordeimg: vuethis.Imgurl, ordenum: vuethis.number}
                        vuethis.$store.commit("infoorde",data)
                        this.close(); //关闭对话框
                        vuethis.$router.push('/shoy/orde')
                    }
                });
        }
    },
    created(){
        this.getlbImg()
    },
    mounted(){
        this.hedcolor()
        //滚动条事件
        window.onscroll = ()=>{
            if(this.$route.params.id){
                this.hedcolor()
            }
        }
    }
}
</script>

<style scoped>
    .v-enter, .v-leave-to{
        opacity: 0;
        transform: translateY(300px);
    }
    .v-enter-active, .v-leave-active{
        transition: all 0.6s ease;
    }

    #mask, #mask1, #mask2{
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 100;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(192, 192, 192, 0.2);
    }

    .goodstjpage{
        width: 100%;
    }
    .hed{
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-bottom: 0.1px solid rgb(129, 129, 129);
        position: fixed; 
        z-index: 2323;
        background-color: #ffffff;
    }
    .hed li{
        float: left;
        width: 33.33%;
    }
    .hed a{
        color: black;
    }
    .mint-swipe{
        height: 300px;
        width: 100%;
        text-align: center;
        background-color: #ffffff;
        top: 42px;
    }
    .mint-swipe img{
        width: auto;
        height: 100%;
    }
    .choose{
        width: 100%;
        /* background-color: aliceblue; */
        margin-top: 40px;
        margin-bottom: 10px;
    }
    .Prname{
        padding: 5px;
        border-bottom: 0.2px solid rgb(218, 215, 215);
    }
    .Prname .spname{
        width: 80%;
        float: left;
        margin: 10px;
    }
    .shoc{
        width: 14%;
        height: 42px;
        text-align: center;
        margin-top: 10px;
        float: right;
        border-left: 0.4px solid rgb(129, 129, 129);
    }
    .mui-navigate-right{
        font-size: 13px;
        color: rgb(201, 200, 200) !important;
    }
    .mui-navigate-right span{
        margin-left: 10px;
        font-size: 14px;
        color: black;
    }
    #ious, #service, #parameter{
        position: fixed;
        width: 100%;
        background-color: #ffffff;
        z-index: 10001;
        bottom: 0;
        left: 0;
        right: 0;
    }
    #ious .ioushed{
        width: 100%;
        height: 40px;
        background-color: rgb(245, 239, 239);
        line-height: 40px;
        font-size: 14px;
        margin: 0;
    }
    .ioushed span{
        margin-left: 20px;
    }
    .iousethos li{
        margin-top: 5px;
        margin-left: 30px;
        font-size: 14px;
    }
    .iousethos li p{
        margin-left: 10px;
    }
    #service .servicehed, #parameter .parameterhed{
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
    }
    #service .serviceqi li{
        position: relative;
        margin-left: 60px;
        margin-top: 20px;
        padding-right: 10px;
    }
    #service .serviceqi li i{
        position: absolute;
        left: -40px;
    }
    #service .serviceqi li p{
        margin-top: 10px;
    }
    #service .serviceqi img{
        width: 23px;
        height: 23px;
    }
    .nut-button{
        margin-top: 20px;
    }
    .choose .mui-table-view{
        position: static;
        font-size: 15px;
    }
    .choose .mui-table-view li span{
        width: 70%;
        float: right;
    }
    .mui-input-row label{
        width: 50%;
    }
    .btn-jr{
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
    .btn-jr .mui-btn{
        width: 49%;
    }
    .comments .mui-table-view li a span{
        font-size: 15px;       
    }
    .comments .mui-table-view li a small:nth-child(2){
        font-size: 13px;
        color: red;
        margin-left: 5%;
    }
    .comments .mui-table-view li a small:nth-child(3){
        color: black;
        font-size: 13px;
        margin-left: 30%;
    }
    .commplhed{
        height: 30px;
        width: 100%;
    }
    .commplhed .name,  .commplhed .xx{
        float: left;
    }
    .commplhed .xx{
        margin-left: 2%;
        margin-top: -3px;
    }
    .commplhed .xx span{
        font-size: 13px;
        color:red;
    }
    .commplhed .time{
        float: right;
    }
    .commtext{
        font-size: 14px;
    }
    .commtext img{
        margin-top: 10px;
    }
    .commbut{
        height: 50px;
        width: 100%;
        left: -30%;
    }
    .commbut button{
        border-radius: 30px;
    }
    .intro{
        width: 100%;
        background-color: #ffffff;
    }
    .intro a{
        text-align: center;
        width: 32.5%;
        height: 40px;
        line-height: 40px;
        display: inline-table;
        border-bottom: 0.3px solid rgb(129, 129, 129);
        color: black;
    }
    .intro a:nth-child(2){
        border-left: 0.3px solid rgb(129, 129, 129);
        border-right: 0.3px solid rgb(129, 129, 129);
    }
    .router-link-exact-active{
        color: red !important;
    }
    .colldj, .nut-price{
        color: red;
    }
    #ball{
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        z-index: 99999;
        position: absolute;
    }
</style>
